<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <nav>
    <a href="#/index">Home</a>
    <a href="#/product">产品页</a>
    <a href="#/my">我的页</a>
    <div id="container">

    </div>
  </nav>
<script>
  //定义路由表
  let routeList = [
    {
      hash:'index',
      component:'首页'
    },
    {
      hash:'product',
      component:'产品页'
    },
    {
      hash:'my',
      component:'我的'
    }
  ]
  //刚进入页面设置hash为首页
  location.hash='#/';

  const findHash = ()=>{
    console.log(location.hash); //取到的hash为#/my
    let hash =  location.hash.split('#/')[1];
    document.querySelector('#container').innerHTML = routeList.filter(v => v.hash === hash).map(v => v.component);
  }


  //页面路由改变触发事件
  window.onhashchange = findHash;

</script>
</body>
</html>